<template>
  <div class="product-filter">
    <div class="filter-section">
      <!-- 价格筛选 -->
      <div class="filter-group">
        <h4 class="filter-title">价格区间</h4>
        <div class="price-filter">
          <el-input
            v-model="localFilters.minPrice"
            placeholder="最低价"
            type="number"
            size="small"
            @input="handlePriceChange"
          />
          <span class="price-separator">-</span>
          <el-input
            v-model="localFilters.maxPrice"
            placeholder="最高价"
            type="number"
            size="small"
            @input="handlePriceChange"
          />
        </div>
        <div class="price-presets">
          <el-button
            v-for="preset in pricePresets"
            :key="preset.label"
            size="small"
            type="primary"
            plain
            @click="setPriceRange(preset.min, preset.max)"
          >
            {{ preset.label }}
          </el-button>
        </div>
      </div>

      <!-- 品牌筛选 -->
      <div class="filter-group">
        <h4 class="filter-title">品牌</h4>
        <div class="brand-filter">
          <el-checkbox-group v-model="localFilters.brands" @change="handleFilterChange">
            <el-checkbox
              v-for="brand in brands"
              :key="brand"
              :label="brand"
              size="small"
            >
              {{ brand }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <!-- 评分筛选 -->
      <div class="filter-group">
        <h4 class="filter-title">用户评分</h4>
        <div class="rating-filter">
          <div
            v-for="rating in ratingOptions"
            :key="rating.value"
            class="rating-option"
            :class="{ active: localFilters.rating === rating.value }"
            @click="setRating(rating.value)"
          >
            <el-rate
              :model-value="rating.value"
              disabled
              size="small"
            />
            <span class="rating-text">{{ rating.label }}</span>
          </div>
        </div>
      </div>

      <!-- 其他筛选 -->
      <div class="filter-group">
        <h4 class="filter-title">其他条件</h4>
        <div class="other-filters">
          <el-checkbox
            v-model="localFilters.freeShipping"
            @change="handleFilterChange"
          >
            包郵
          </el-checkbox>
          <el-checkbox
            v-model="localFilters.hasDiscount"
            @change="handleFilterChange"
          >
            有优惠
          </el-checkbox>
          <el-checkbox
            v-model="localFilters.inStock"
            @change="handleFilterChange"
          >
            现货
          </el-checkbox>
        </div>
      </div>

      <!-- 清空筛选 -->
      <div class="filter-actions">
        <el-button @click="clearFilters" type="info" plain>
          清空筛选
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'

interface FilterOptions {
  minPrice: string
  maxPrice: string
  brands: string[]
  rating: number
  freeShipping: boolean
  hasDiscount: boolean
  inStock: boolean
}

const props = defineProps<{
  filters: FilterOptions
}>()

const emit = defineEmits<{
  filterChange: [filters: FilterOptions]
}>()

const localFilters = reactive<FilterOptions>({ ...props.filters })

// 价格预设选项
const pricePresets = ref([
  { label: '0-100', min: 0, max: 100 },
  { label: '100-500', min: 100, max: 500 },
  { label: '500-1000', min: 500, max: 1000 },
  { label: '1000-5000', min: 1000, max: 5000 },
  { label: '5000以上', min: 5000, max: 999999 }
])

// 品牌选项
const brands = ref([
  '苹果', '华为', '小米', '三星', 'OPPO', 'vivo',
  '联想', '戴尔', '惠普', '索尼', '佳能', '尼康'
])

// 评分选项
const ratingOptions = ref([
  { value: 5, label: '5星' },
  { value: 4, label: '4星及以上' },
  { value: 3, label: '3星及以上' },
  { value: 2, label: '2星及以上' }
])

// 设置价格区间
const setPriceRange = (min: number, max: number) => {
  localFilters.minPrice = min.toString()
  localFilters.maxPrice = max === 999999 ? '' : max.toString()
  handleFilterChange()
}

// 设置评分
const setRating = (rating: number) => {
  localFilters.rating = localFilters.rating === rating ? 0 : rating
  handleFilterChange()
}

// 处理价格变化
const handlePriceChange = () => {
  // 防抖处理
  setTimeout(() => {
    handleFilterChange()
  }, 500)
}

// 处理筛选条件变化
const handleFilterChange = () => {
  emit('filterChange', { ...localFilters })
}

// 清空筛选
const clearFilters = () => {
  localFilters.minPrice = ''
  localFilters.maxPrice = ''
  localFilters.brands = []
  localFilters.rating = 0
  localFilters.freeShipping = false
  localFilters.hasDiscount = false
  localFilters.inStock = false
  handleFilterChange()
}

// 监听外部筛选条件变化
watch(() => props.filters, (newFilters) => {
  Object.assign(localFilters, newFilters)
}, { deep: true })
</script>

<style scoped>
.product-filter {
  background: #2c3e50;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-group {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid  #2c3e50;
}

.filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.filter-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

/* 价格筛选 */
.price-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.price-separator {
  color: #666;
  font-weight: bold;
}

.price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 品牌筛选 */
.brand-filter {
  max-height: 150px;
  overflow-y: auto;
}

.brand-filter :deep(.el-checkbox-group) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 评分筛选 */
.rating-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rating-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rating-option:hover {
  background:  #2c3e50;
}

.rating-option.active {
  background:  #2c3e50;
  border: 1px solid #409eff;
}

.rating-text {
  font-size: 14px;
  color: #666;
}

/* 其他筛选 */
.other-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 筛选操作 */
.filter-actions {
  margin-top: 20px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-filter {
    padding: 16px;
  }

  .price-presets {
    gap: 4px;
  }

  .price-presets .el-button {
    font-size: 12px;
    padding: 4px 8px;
  }
}
</style>
